﻿<template>
  <v-card>
    <v-card-title>
      <span class="headline" v-text="isEdit ? '修改分类' : '新增分类'"></span>
    </v-card-title>
    <v-divider/>
    <v-card-text class="px-3">
      <v-form v-model="valid" ref="myCategoryForm">
        <v-container grid-list-md>
          <v-layout wrap>
            <v-flex xs12 mx-auto>
              <v-text-field v-model="name" label="分类名称" required />
            </v-flex>
            <v-flex xs12 mx-auto>
              <v-label>是否是一级分类:</v-label>
              <v-radio-group v-model="isParent" row>
                <v-radio label="是" value="1"></v-radio>
                <v-radio label="否" value="0"></v-radio>
              </v-radio-group>
            </v-flex>
            <v-flex xs12 mx-auto>
              <v-select
                      v-model="parent"
                      :items="categories"
                      item-text="name"
                      item-value="id"
                      label="选择分类"
                      persistent-hint
                      :disabled="isParent==='1'?true:false"
                      return-object
                      single-line
              ></v-select>
            </v-flex>
          </v-layout>
        </v-container>
      </v-form>
    </v-card-text>
    <v-card-actions>
      <v-spacer/>
      <v-btn depressed  small @click="submit">提交</v-btn>
      <v-btn depressed small @click="clear">重置</v-btn>
      <v-btn depressed  small @click="close">关闭</v-btn>
    </v-card-actions>
  </v-card>

</template>

<script>
  export default {
    name: "category-form",
    props: {
      oldCategory: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        valid: false,
        category: {},
        categories:[],
        name:'',
        isParent:'1',
        parent:{},
      }
    },
    methods: {
      submit() {
        const that = this

        // 表单校验
          this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/category/save',
            data: this.$qs.stringify({
              isParent:that.isParent,
              parentId:that.parent.id,
              name:that.name})
          }).then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          })
            .catch(() => {
              this.$message.error("保存失败！");
            });
      },
      clear() {
        // 重置表单
        this.$refs.myCategoryForm.reset();
        // 需要手动清空商品分类
        this.categories = [];
      },
      close(){
        this.$emit("close");
      },
      getParentCategory() {
        this.$http.get("/category/of/parent?pid=0").then(resp=>{
          this.categories = resp.data
      })
      }
    },
    created() {
      this.getParentCategory()
    },
    watch: {
      oldCategory: {// 监控oldCategory的变化
        handler() {
            this.parent = this.oldCategory.parent
            this.name = this.oldCategory.name
            this.isParent = this.oldCategory.isParent + ""

          console.log(this.isParent+"     11111111")

        },
        deep: true
      },
      isParent: {
        handler() {
          if (this.isParent === '1') {
            this.parent = {}
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
